<template>
	<view>
		<navNav :navobj="navobj"></navNav>
		<!-- <view class="backBox">
			<view class="left"></view>
			<view class="right"></view>
		</view> -->
		<view class="headerBox">
			<view class="avatarBox">
				<image mode="aspectFill" class="avatar" :src="users.avatar?users.avatar : '../../static/img/home/exp.jpg'"></image>
			</view>
			<view class="formation">
				<view class="name">{{users.nickName}}</view>
				<view class="vip" v-if="user.card">{{user.card.name?`会员 ${user.card.name}`:'暂时还不是会员'}}</view>
			</view>
		</view>
		<view class="moneyBox">
			<view class="flex_row_normal_center">
				<view class="title">账户</view>
				<!-- <image class="icon" src="../../static/img/money/coin.png"></image> -->
			</view>
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<view class="money">{{user.balance?user.balance:'0.00'}}</view>
				<view class="button" @click="toTopUp">去充值</view>
			</view>
		</view>
		<view class="vipBox">
			<view class="title">会员</view>
			<scroll-view class="list" scroll-x>
				<view class="item" :class="actIndex===index?'act':''" @click="choosetype" :data-price="item.price" :data-index="index"
					v-for="(item,index) in list" :key="index">
					<view class="time">{{item.name}}</view>
					<view class="flex_row_normal_center">
						<!-- <image class="icon" src="../../static/img/money/coin.png"></image> -->
						<view class="price fontDingDIng">{{item.price}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="tips" @click="goagreement(3)">开通前请阅读<span style="color: dodgerblue;">《会员协议》</span></view>
			<view class="button" @click="buy">确定协议并支付 {{list[actIndex].price}}</view>
		</view>
		<view class="rightsBox">
			<view class="title">权益</view>
			<view class="rights">
				<view class="right" v-for="(item,index) in rightsList" :key="index">
					<view class="icon">
						<view class="text">{{item.icon}}</view>
					</view>
					<view class="name oneOver">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 提现 -->
		<view v-show="visible">
			<view @click="clickMask" v-show="visible" style=" position: fixed;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 750rpx;background: rgba(0,0,0,0.5);z-index:999;"></view>
		  <view style="z-index: 999;width: 750rpx;height: 800rpx;z-index:999;border-radius: 20rpx 20rpx 0 0;background-color: #fff; background-color: #fff;" :class="visible?'isactive':'none'" class="popup-content " >
		     <view class="htbox">
		     	<view class="timeBox">
		     		<view class="time">支付剩余时间:00:{{m}}:{{s}}</view>
		     	</view>
		     	<view class="title"><span style="font-size: 12px;">￥</span>{{price || 0.00}}</view>
		     	<view class="checkBox">
		     		<view class="labelBox">
		     			<view class="label">
		     				<image class="img" mode="aspectFit"
		     					src="https://gd-hbimg.huaban.com/3b865314c9f832fa7ea6cf2ee89acc13894461778d14-EqVntA_fw658webp">
		     				</image>
		     				<view class="tips">微信支付</view>
		     			</view>
		     			<view class="check">
		     				<view class="act"></view>
		     			</view>
		     		</view>
		     	</view>
		     	<view class="button" @click="pay">支付</view>
		     </view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {userStore} from '@/store/user.js'//引入空间
	const userStores = userStore()//给空间命名
	// const {user,balance} = storeToRefs(userStores);//解构数据
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
				title:'会员中心',
				image:true
	})
	const visible=ref(false)
	const clickMask=()=>{
		visible.value = false
	}
	const chnagevisible=()=>{
		visible.value= !visible.value
	}
  const list = ref([])
	const rightsList = ref([
		{
				name: '每天优先推荐',
				icon: '推'
			},
			{
				name: '师傅订单置顶',
				icon: '顶'
			},
			{
				name: '优质师傅服务',
				icon: '优'
			},
			{
				name: '会员特别标识',
				icon: '标'
			},
			{
				name: '系统前排推荐',
				icon: '荐'
			}
	])
			
				
	const actIndex=ref(0) 
	const user=ref('') 
	const users=ref({})
	
	const m=ref(29) 
	const s=ref(60) 
	const timer=ref('') 
	const data=ref({}) 
	const price=ref(0.00) 
	const payment=ref( '')
	const orderId=ref('') 
	const lookid=ref('')

	onShow(()=>{
		user.value = userStores.balance
		users.value = userStores.user
		getData()
		const timer = setInterval(() => {
			s.value--
			if (s.value == 0) {
				s.value = 60
				m.value--
				if (m.value == 0) {
					clearInterval(timer)
				}
			}
		}, 1000)
	}) 
		
	
	const	choosetype=(e)=>{
		actIndex.value = e.currentTarget.dataset.index	
	}
	const pay=async()=> {
		const result = await proxy.$api.createPay(data.value)
		if(result.code==200){
			var data = {
				...JSON.parse(result.data.payData)
			}
			uni.requestPayment({
				provider: 'wxpay',
				nonceStr: data.nonceStr,
				package: data.package,
				paySign: data.paySign,
				signType: data.signType,
				timeStamp: data.timeStamp,
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		}
	}
	const getData=async()=> {
		const result = await proxy.$api.vipfun()
		if(result.code==200){
			list.value = result.data
		}
	}
	
	const goagreement=(id)=>{
		uni.navigateTo({
			url:'/pages-user/agreement/agreement?id='+id
		})
	}
	const toTopUp=()=>{
		uni.navigateTo({
			url: '/pages-user/balance/balance'
		})
	}
 const buy=()=>{
		chnagevisible()
 }

</script>

<style scoped lang="scss">
	.popup-content {
		width: 750rpx;
		position: fixed;
		bottom: -200rpx;
		left: 0;
		background: #fff;
		// transform: translate3d(0, 100%, 0);
		transition: all 0.3s;
		z-index:999;
	}
	.isactive{
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		// transition: transform  2s;
		transition: all 0.8s;
		z-index:999;
	}
	.htbox{
		width: 750rpx;height: 1000rpx;z-index:999;box-sizing: border-box;
		border-radius: 20rpx 20rpx 0 0;background-color: #fff;padding: 40rpx 30rpx;
		.timeBox {
			padding-top: 30px;
			display: flex;
			justify-content: center;
			color: $grey;
			font-size: 14px;
		}
		.checkBox {
			background-color: white;
			margin: 20px;
			padding: 20px;
			border-radius: 10px;
		
			.labelBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.label {
					display: flex;
					align-items: center;
		
					.tips {
						font-size: 14px;
						margin-left: 5px;
					}
		
					.img {
						width: 20px;
						height: 20px;
					}
				}
		
				.check {
					width: 12px;
					height: 12px;
					border-radius: 50%;
					border: 2px solid $grey;
					display: flex;
					align-items: center;
					justify-content: center;
		
					.act {
						border-radius: 50%;
						width: 8px;
						height: 8px;
						background-color: $grey;
					}
				}
			}
		}
		.button {
			position: fixed;
			bottom: 100rpx;
			left: 94rpx;
			width: 550rpx;
			border-radius: 50px;
			text-align: center;
			font-weight: bold;
			padding: 10px;
			color: white;
			background-color: dodgerblue;
		}
		.title {
			font-weight: bold;
			font-size: 25px;
			text-align: center;
			color: $red;
			margin: 5px 0px;
		}
		}
	.rightsBox {
		padding: 20px;
		position: relative;
		z-index: +1;

		.title {
			font-weight: bold;
			font-size: 16px;
			margin-bottom: 20px;
		}

		.rights {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;

			.right {
				width: 50%;
				display: flex;
				align-items: center;
				margin-bottom: 10px;

				.icon {
					background: $linerBlue;
					width: 30px;
					height: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;

					.text {
						background: white;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-weight: bold;
						font-size: 14px;
					}
				}
				
				.name{
					font-size: 14px;
					margin-left: 5px;
				}
			}
		}
	}

	.backBox {
		filter: blur(20vw);
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0px;
		top: 0px;
		background-color: white;
		display: flex;
		justify-content: space-between;

		.left {
			width: 50vw;
			height: 2vh;
			background-color: #0facee;
			z-index: +1;
		}

		.right {
			width: 50vw;
			height: 2vh;
			background-color: #ee0fa8;
			z-index: +1;
		}
	}

	.vipBox {
		position: relative;
		z-index: +1;
		padding-top: 20px;

		.button {
			border-radius: 10px;
			background: $linerBlue;
			font-size: 15px;
			font-weight: bold;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0px 20px;
			padding: 15px 0px;
		}

		.tips {
			font-size: 13px;
			padding: 10px 20px;
		}

		.title {
			font-weight: bold;
			font-size: 20px;
			padding-left: 20px;
		}

		.list {
			padding-top: 10px;
			white-space: nowrap;

			.act {
				background: $linerBlue !important;

				.price {
					color: white !important;
				}

				.icon {
					filter: contrast(200%) !important;
				}

				.time {
					color: white !important;
				}
			}

			.item {
				display: inline-block;
				background: #f5f5f5;
				margin-right: 10px;
				padding: 20px;
				border-radius: 10px;
				width: 100px;

				.time {
					font-size: 13px;
					font-weight: bold;
					margin-bottom: 20px;
				}

				.icon {
					width: 20px;
					height: 20px;
					filter: contrast(70%);
					margin-right: 5px;
				}

				.price {
					font-size: 25px;
					font-weight: bold;
				}
			}

			.item:first-child {
				margin-left: 20px;
			}
		}
	}

	.moneyBox {
		padding: 20px;
		padding-bottom: 0px;
		position: relative;
		z-index: +1;

		.title {
			font-weight: bold;
			font-size: 14px;
		}

		.money {
			font-size: 25px;
			font-weight: bold;
		}

		.icon {
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}

		.button {
			border-radius: 50px;
			background: $linerBlue;
			font-size: 14px;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 5px 10px;
		}
	}

	.headerBox {
		padding: 20px;
		padding-bottom: 0px;
		position: relative;
		z-index: +1;
		display: flex;
		align-items: center;

		.avatarBox {
			width: 50px;
			height: 50px;

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.formation {
			margin-left: 10px;

			.name {
				font-weight: bold;
				font-size: 18px;
			}

			.vip {
				background: $linerBlue;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: bold;
				font-size: 15px;
			}
		}
	}
</style>